<template>
  <div class="img2">
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-4 column">
        </div>
        <div class="col-md-4 column">
          <div class="row clearfix">
            <div class="col-md-12 column">
              <form role="form">
                <div class="form-group">
                  <label>故障描述</label><input type="text" v-model="repairInfo" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                  <label>故障地址</label><input type="text" v-model="repairPath" class="form-control" />
                </div>
                <div class="form-group">
                  <label>教师号</label><input type="text" v-model="teacherId" class="form-control" />
                </div>
                <el-select v-model="value" placeholder="选择故障类型">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
                <br>
                <br>
                <div class="form-group">
                  <label>上传故障图片</label>
                  <el-upload
                      class="upload-demo"
                      drag
                      action="http://localhost:8099/teacher/upload"
                      :data={repairInfo:this.repairInfo,repairPath:this.repairPath,teacherId:this.teacherId}
                      multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <p class="help-block">
                  </p>
                </div>
                <div class="checkbox">
                </div> <button type="submit" class="btn btn-default" v-on:click="submit">提交</button>
              </form>
            </div>
          </div>
        </div>
        <div class="col-md-4 column">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Teacher",
  data() {
    return {
      options: [{
        value: '教学楼故障',
        label: '教学楼故障'
      }, {
        value: '图书馆故障',
        label: '图书馆故障'
      }, {
        value: '宿舍楼故障',
        label: '宿舍楼故障'
      }, {
        value: '学校场所故障',
        label: '学校场所故障'
      }, {
        value: '实验室故障',
        label: '实验室故障'
      }],
      value: '',
      repairInfo : "",
      repairPath : "",
      repairType : "",
      teacherId : "",
      data:{
        repairInfo : this.repairInfo,
        repairPath : this.repairPath,
        teacherId : this.teacherId
      }

    }
  },
  created() {
    console.log("hello")
  },
  methods: {

    submit(){
      this.$ajax.post(base_url + "teacher/repair",{
        repairInfo : this.repairInfo,
        repairPath : this.repairPath,
        repairType : this.value,
        teacherId : this.teacherId
      }).then(response => {
        if (response.data.code == 200){
          alert("提交成功")
        }else {
          alert("提交失败")
        }
      })
    }

  }
}
</script>

<style scoped>
.img2{
	position: absolute;
	overflow: hidden;
	background-image:url(../../img/5.gif);
	height: 100%;
	width:100%;
    top: 59px;
    z-index: 1000;
    opacity: 0.6;
	
}
.col-md-12{
	font-weight: bold;
	color: azure;
}
.el-upload__tip{
	font-weight: bold;
	color: azure;
}
.el-select{
	color: beige;
}
</style>